﻿/********* Global variables *********/

// An array containing the departure time divs related to each day of the week
var ptDepartureTimeDivsArray;

// Number of selected days
var ptSelectedDaysNumber;

/************************************/


/********* Initialization functions *********/

// Control initialization
function initPeriodicTripControl()
{
    ptSelectedDaysNumber = 0;

    // Init the ptDepartureTimeDivs array
    initDepartureTimeArray();

    // Sets a "pressed" style for each selected "day button" (the ones whose
    // hidden field has value == "1") and show the related departure time divs.
    $('.ptDayOfTheWeek').each( function(index){
        var hiddenFieldValue = $(this).children().val();
        if(hiddenFieldValue == "1")
        {
            $(this).addClass('selected');
            $(ptDepartureTimeDivsArray[this.id]).show();
            ptSelectedDaysNumber++;
        }
    });
    
    
    // if there is at least a selected day the trip duration must be visible
    if(ptSelectedDaysNumber > 0)
        $('#ptTripDuration').show();
    
    
    if($('.ptEditable').val() == "1")
    {
        // If the control is editable registers a click event handler for every "day button"
        $('.ptDayOfTheWeek').click(onDayButtonClick);
    }
    else
    {
        // If the control isn't editable the departure time is dispayed in spans instead of dropdown lists
        $('.ptTime').each( function(index){
        
            var ptTimeChildrens = $(this).children();
            var hDDl = $(ptTimeChildrens[0]); // hours DropDown List
            var mDDl = $(ptTimeChildrens[2]); // minutes DropDown List
            var sepSpan = $(ptTimeChildrens[1]); // the span where hours and minutes will be displayed
            
            sepSpan.html(hDDl.val() + " : " + mDDl.val());
            
            hDDl.hide();
            mDDl.hide();
        });
    }
    
    
    //registers a click event handler for the close button
    $('#ptClose').click(hidePeriodicTripControl);
}


// Init the ptDepartureTimeDivs array
function initDepartureTimeArray()
{
    ptDepartureTimeDivsArray = new Array();
    ptDepartureTimeDivsArray['ptMondayBox'] = document.getElementById('ptMondayDepartureTime');
    ptDepartureTimeDivsArray['ptTuesdayBox'] = document.getElementById('ptTuesdayDepartureTime');
    ptDepartureTimeDivsArray['ptWednesdayBox'] = document.getElementById('ptWednesdayDepartureTime');
    ptDepartureTimeDivsArray['ptThursdayBox'] = document.getElementById('ptThursdayDepartureTime');
    ptDepartureTimeDivsArray['ptFridayBox'] = document.getElementById('ptFridayDepartureTime');
    ptDepartureTimeDivsArray['ptSaturdayBox'] = document.getElementById('ptSaturdayDepartureTime');
    ptDepartureTimeDivsArray['ptSundayBox'] = document.getElementById('ptSundayDepartureTime');
}


$(document).ready( function(){
    // preload images
    preloadImages();
});


// Preload images
function preloadImages()
{
    var close = new Image();
    close.src = "/PeriodicTripControl/resources/close.png";
    
    var corners = new Image();
    corners.src = "/PeriodicTripControl/resources/corners.png";

    var background = new Image();
    background.src = "/PeriodicTripControl/resources/background.png";
    
    var buttonBackground = new Image();
    buttonBackground.src = "/PeriodicTripControl/resources/daysOfTheWeekBckg.png";
    
    // for debugging
    //$('body').append(close);
    //$('body').append(corners);
    //$('body').append(background);
    //$('body').append(buttonBackground);
}

/********************************************/


/********* Event handlers *********/

// Day buttons' click event handler
function onDayButtonClick(event)
{
    if( $(event.target).hasClass('selected') ) // if the "day button" is already selected
    {
        $(event.target).removeClass('selected'); // removes the "pressed" style
        $(event.target).children().val("0"); // changes the value of the related hidden field to '0'
        $(ptDepartureTimeDivsArray[event.target.id]).hide('slow'); // hide the related departure time div
        
        ptSelectedDaysNumber--; // update the number of selected days
        if(ptSelectedDaysNumber == 0) // if there aren't selected day the trip duration must be invisible
            $('#ptTripDuration').hide('slow');
    }
    else // if the "day button" isn't selected
    {
        $(event.target).addClass('selected'); // adds the "pressed" style
        $(event.target).children().val("1"); // changes the value of the relative hidden field to '1'
        $(ptDepartureTimeDivsArray[event.target.id]).show('slow'); // show the related departure time div
        
        ptSelectedDaysNumber++; // update the number of selected days
        if(ptSelectedDaysNumber == 1)
            $('#ptTripDuration').show('slow');
    }
}

/**********************************/


/********* Public functions *********/

// USE THIS TO DISPLAY THE CONTROL!
// Display the PeriodicTripControl in the center of the window
function showPeriodicTripControl()
{
    /* Control initalization */
    initPeriodicTripControl();
    
    
    /* Centers and dysplays the control */

    var control = document.getElementById(ptMainPanelId);

    // display the control
    control.style.display = "block";

    //get viewport's width and height
    var viewportWidth;
    var viewportHeight;
    
    if( typeof( window.innerWidth ) == 'number' ) //Non-IE
    {
        viewportWidth = self.innerWidth;
        viewportHeight = self.innerHeight;
    } 
    else //IE
    {
        viewportWidth = document.documentElement.clientWidth;
        viewportHeight = document.documentElement.clientHeight;
    }
    
    
    //get scroll offset
    var scrollOffsetY;
    var scrollOffsetX;
    
    if( typeof( window.pageYOffset ) == 'number' ) //Non-IE
    {
        scrollOffsetY = window.pageYOffset;
        scrollOffsetX = window.pageXOffset;
    } 
    else //IE
    {
        scrollOffsetY = document.documentElement.scrollTop;
        scrollOffsetX = document.documentElement.scrollLeft;
    }
    

    //get control's width and height
    var controlWidth = control.offsetWidth;
    var controlHeight = control.offsetHeight;

    //calculate position
    var controlTop = (viewportHeight/2) - (controlHeight/2) + scrollOffsetY;
    var controlLeft = (viewportWidth/2) - (controlWidth/2) + scrollOffsetX;


    //position the control
    control.style.top = controlTop+'px';
    control.style.left = controlLeft+'px';
}


// USE THIS TO HIDE THE CONTROL!
// Hide the PeriodicTripControl
function hidePeriodicTripControl()
{
    document.getElementById(ptMainPanelId).style.display = "none";
}

/************************************/